﻿<commonbase:LayoutAwarePage
    x:Class="Icinetic.FeedCategorySample.ArticlePage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Icinetic.FeedCategorySample"
    xmlns:common="using:Icinetic.FeedCategorySample.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:commonbase="using:Icinetic.FeedCategorySample.Common.Base"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ScrollViewer
            x:Name="gridScrollViewer"
            AutomationProperties.AutomationId="DetailsScrollViewer"
            Grid.Row="1"
            Padding="120,15,0,80"
            VerticalAlignment="Top"
            Style="{StaticResource HorizontalScrollViewerStyle}">
            
            <common:RichTextColumns x:Name="richTextColumns" Margin="0,0,40,15">
                <RichTextBlock x:Name="richTextBlock" Width="600" Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
                    <Paragraph TextAlignment="Left">
                        <Run x:Name="fecha" FontWeight="SemiBold" Foreground="Gray" Text="{Binding Item.Date}"/>
                        <InlineUIContainer>
                            <Button x:Name="compartirButton" Content="Compartir" Margin="-4,-11" Click="CompartirButton_Click" />
                        </InlineUIContainer>
                    </Paragraph>
                    <Paragraph LineStackingStrategy="MaxHeight">
                        <InlineUIContainer>
                            <Image x:Name="image" MaxHeight="460" Margin="0,25,0,25" Stretch="Uniform" Source="{Binding Item.Image}"/>
                        </InlineUIContainer>
                    </Paragraph>
                    <Paragraph TextAlignment="Justify">
                        <Run x:Name="contenido" FontWeight="SemiLight" FontFamily="Segoe UI" Text="{Binding Item.Content}"/>
                        <InlineUIContainer>
                            <HyperlinkButton x:Name="Link" Content="[Ver más]" NavigateUri="{Binding Item.Link}" Foreground="{StaticResource ApplicationColor}"  Margin="0,-11"/>
                        </InlineUIContainer>
                    </Paragraph>
                </RichTextBlock>

                <common:RichTextColumns.ColumnTemplate>
                    <DataTemplate>
                        <RichTextBlockOverflow Width="600" Margin="30,0,0,0">
                            <RichTextBlockOverflow.RenderTransform>
                                <TranslateTransform X="-1" Y="4"/>
                            </RichTextBlockOverflow.RenderTransform>
                        </RichTextBlockOverflow>
                    </DataTemplate>
                </common:RichTextColumns.ColumnTemplate>
            </common:RichTextColumns>
        </ScrollViewer>
        
        <ScrollViewer
            x:Name="gridScrollViewerSnapped"
            AutomationProperties.AutomationId="DetailsScrollViewer"
            Visibility="Collapsed"
            Grid.Row="1"
            Padding="0,15,0,50"
            VerticalAlignment="Top"
            Style="{StaticResource VerticalScrollViewerStyle}">

            <common:RichTextColumns x:Name="richTextColumnsSnapped" Margin="20,0,5,5">
                <RichTextBlock x:Name="richTextBlockSnapped" Width="260" Style="{StaticResource ItemRichTextStyle}">
                    <Paragraph>
                        <Run x:Name="fechaSnapped" FontWeight="SemiBold" Foreground="Gray" Text="{Binding Item.Date}"/>
                    </Paragraph>
                    <Paragraph LineStackingStrategy="MaxHeight">
                        <InlineUIContainer>
                            <Image x:Name="imageSnapped" MaxHeight="260" Margin="0,25,0,25" Stretch="Uniform" Source="{Binding Item.Image}"/>
                        </InlineUIContainer>
                    </Paragraph>
                    <Paragraph TextAlignment="Justify">
                        <Run x:Name="contenidoSnapped" FontWeight="SemiLight" FontFamily="Segoe UI" Text="{Binding Item.Content}"/>
                        <InlineUIContainer>
                            <HyperlinkButton x:Name="LinkSnapped" Content="[Ver más]" NavigateUri="{Binding Item.Link}" Foreground="{StaticResource ApplicationColor}" Margin="0,-11"/>
                        </InlineUIContainer>
                    </Paragraph>
                </RichTextBlock>
            </common:RichTextColumns>
        </ScrollViewer>
        
        <!-- Back button and page title -->
        <Grid Background="{StaticResource ApplicationColor}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <Image x:Name="logo" Source="/Assets/header-logo.png" Style="{StaticResource HeaderLogoStyle}" Grid.Column="1" />
            <TextBlock x:Name="pageTitle" Text="{Binding Item.TitleAll}" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1" IsHitTestVisible="false"/>
        </Grid>
        
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled"/>
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridScrollViewer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridScrollViewer" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="100,15,0,80"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridScrollViewerSnapped" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridScrollViewer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridScrollViewerSnapped" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="logo" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="10,10,10,80"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</commonbase:LayoutAwarePage>